<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
// 在script setup部分添加以下导入
import { getUserByPhone } from '../api/user';
import { setToken } from '../utils/auth';

// 修改导入，添加updateDoctor方法
import { getDoctorByPhone, updateDoctor } from '../api/doctor';

// 导入 NavBar 组件
import NavBar from './NavBar.vue';

const router = useRouter();
const phoneNumber = ref('');
const inputVerificationCode = ref('');
const verificationCode = ref(''); // 添加验证码状态
const loginError = ref('');

// 生成随机验证码
const generateVerificationCode = () => {
  verificationCode.value = Math.floor(1000 + Math.random() * 9000).toString();
};

// 刷新验证码
const refreshVerificationCode = () => {
  generateVerificationCode();
};

// 页面加载时生成验证码
onMounted(() => {
  generateVerificationCode();
});

// 在原有响应式变量中添加角色选择
const selectedRole = ref('patient'); // 默认患者

// 修改后的登录验证方法
const validateLogin = async () => {
    try {
        // 验证验证码
        if (inputVerificationCode.value !== verificationCode.value) {
            throw new Error('验证码错误');
        }

        console.log('开始验证手机号:', phoneNumber.value);

        // 调用后端接口验证手机号是否存在
        // 根据角色选择接口
        let result;
        if (selectedRole.value === 'patient') {
            result = await getUserByPhone(phoneNumber.value);
        } else {
            result = await getDoctorByPhone(phoneNumber.value);
        }

        if (result.code == 0) {
            // 修改登录验证方法中的存储逻辑
            if (result.data != null) {
                // 根据角色存储信息
                if (selectedRole.value === 'patient') {
                    localStorage.setItem('userInfo', JSON.stringify(result.data));
                    localStorage.removeItem('doctorInfo'); // 清除可能存在的医生信息
                } else {
                    // 如果是医生登录，更新状态为"值班"
                    const doctorData = result.data;
                    localStorage.setItem('doctorInfo', JSON.stringify(doctorData));
                    localStorage.removeItem('userInfo'); // 清除可能存在的患者信息

                    // 更新医生状态为"值班"
                    try {
                        await updateDoctor({
                            ...doctorData,
                            status: '值班'
                        });
                        console.log('医生状态已更新为值班');
                    } catch (updateError) {
                        console.error('更新医生状态失败:', updateError);
                        // 继续登录流程，不阻止用户登录
                    }
                }

                // 根据角色跳转到不同页面
                if (selectedRole.value === 'patient') {
                    router.push('/');
                } else {
                    router.push('/doctor');
                }
            }
            else {
                // 用户不存在的处理
                if (selectedRole.value === 'patient') {
                    // 患者不存在，跳转到个人中心页面进行注册
                    console.log('用户不存在，进行注册');
                    localStorage.setItem('tempPhone', phoneNumber.value);
                    localStorage.setItem('needRegister', 'true');
                    router.push('/personal');
                } else {
                    // 医生不存在，显示错误信息
                    throw new Error('该手机号未注册医生账号');
                }
            }
        } else {
            // 接口返回错误
            throw new Error('接口出错，请稍后再试');
        }
    } catch (error) {
        console.error('登录失败:', error);
        loginError.value = error.message || '登录失败，请稍后再试';
    }
};



</script>

<template>
  <div class="login-container">
    <NavBar />

    <div class="content">
      <div class="login-panel">
        <h2 class="login-title">用户登录</h2>

        <!-- 在手机号码输入框上方添加 -->
        <div class="form-group">
          <label>登录身份</label>
          <select v-model="selectedRole" class="role-select">
            <option value="patient">患者</option>
            <option value="doctor">医生</option>
          </select>
        </div>


        <div class="form-group">
          <label for="phone">手机号码</label>
          <input
            type="text"
            id="phone"
            v-model="phoneNumber"
            placeholder="请输入手机号码"
            maxlength="11"
          />
        </div>

        <div class="form-group verification-group">
          <label for="verification">验证码</label>
          <div class="verification-input-group">
            <input
              type="text"
              id="verification"
              v-model="inputVerificationCode"
              placeholder="请输入验证码"
              maxlength="4"
            />
            <div class="verification-code" @click="refreshVerificationCode">
              {{ verificationCode }}
            </div>
          </div>
        </div>

        <div class="error-message" v-if="loginError">
          {{ loginError }}
        </div>

        <button class="login-btn" @click="validateLogin">登录</button>

        <div class="login-footer">
          <p>登录即表示您同意我们的<a href="#">服务条款</a>和<a href="#">隐私政策</a></p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped src="../css/login.css"></style>
